<template>
  <div>
    <nav-header :headerTitle="'设置背景'" :headerNext="''" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="p-header" @click="upImg('imgArr')">
        <span>自定义设置</span>
        <img src="@/assets/images/shop_enter.png" alt />
        <div></div>
      </div>
      <div class="p-section">
        <div
          class="items"
          v-for="(items,index) in show.imgArr"
          :key="index"
          @click="showImg(items)"
        >
          <div class="items-content">
            <img
             v-lazy="{src: items, error: defaultImg(2), loading: defaultImg(2)}"
             alt />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import {Lazyload } from 'vant'
Vue.use(Lazyload);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "SetBg",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        imgArr: [
          "https://yylifetech.oss-cn-shenzhen.aliyuncs.com/share/shareImg.jpg"
        ]
      },
      params: {}
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$http.post("shop/getShopBgImgs", this.params).then(
        res => {
          console.log(res);
          this.show.imgArr = res.data.bgImgs;
        },
        err => {
          console.log(err);
        }
      );
    },
    showImg: function(setBg) {
      //console.log(setBg);
      this.goUrl("editShop", { setBg: setBg,shopId:this.$route.query.shopId});
    },
    upImg(type) {
      //alert(type);
      let parmas = {
        maxCount: 1, //选择相册的最大数，若是相机拍照则只能为1
        sourceType: ["album", "camera"], //相册&&拍照，可选其一
        method: "shopImg"
      };
      this.$bridge.callHandler("chooseImages", parmas, res => {
        let imagesArr = res.split(",");
        if (type == "imgArr") {
          this.show.imgArr.push(imagesArr[0]);
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.null32 {
  width: 100%;
  height: 32px;
}
.null78 {
  width: 100%;
  height: 78px;
}
.page {
  margin-top: 86px;
  .p-header {
    width: 100%;
    height: 128px;
    position: relative;
    span {
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(23, 24, 35, 1);
      position: absolute;
      left: 32px;
      top: 50px;
    }
    img {
      width: 28px;
      height: 28px;
      position: absolute;
      right: 32px;
      top: 56px;
    }
    div {
      height: 1px;
      background: rgba(237, 237, 237, 1);
      position: absolute;
      right: 32px;
      left: 32px;
      bottom: 0px;
    }
  }
  .p-section {
    margin: 16px;
    .items {
      float: left;
      width: 50%;
      .items-content {
        margin: 16px;
        img {
          width: 100%;
          height: 152px;
        }
      }
    }
  }
}
</style>
